<!--
 * @Author: cqg 
 * @Date: 2020-12-01 15:57:51
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-31 10:44:21
 * @Description: file content
-->
<template>
  <div class="page-box">
    <dataList
      ref="dataList"
      placeholder="请输入出租方或者物业名称"
      :pageInfo="pager"
      :listData="tableData"
      searchName="propertyNames"
      :menuList="[{add:'合同录入'},'export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
    >
      <el-table :data="tableData" align="center">
        <el-table-column label="物业名称" prop="propertyNames" align="center" />
        <el-table-column label="合同编码" prop="contractCode">
          <template slot-scope="scope">
            <img :src="NewIcon" class="imgIcon" v-if="scope.row.status == '01'" />
            {{scope.row.contractCode}}
          </template>
        </el-table-column>
        <el-table-column label="出租方" prop="customerName" />
        <el-table-column prop="status" align="center" label="合同状态">
          <template slot-scope="scope">{{scope.row.status | dict('rent_contract_status')}}</template>
        </el-table-column>

        <el-table-column label="建筑面积(m²)" prop="buildingArea" />
        <el-table-column label="月租金(元)" prop="rentAmount" />
        <el-table-column label="合同签订日期" prop="signDate" />
        <el-table-column label="租赁周期" prop="startTime">
          <template slot-scope="scope">{{scope.row.startDate}}至{{scope.row.endDate}}</template>
        </el-table-column>
        <el-table-column width="240px" label="操作">
          <template slot-scope="scope">
            <div style="float:left">
              <el-button type="text" @click="$refs.contractView.show(scope.row.lessorContractId)">查看</el-button>
            </div>
            <div style="float:left" v-if="scope.row.status=='00' || scope.row.status=='01'|| scope.row.status=='12' || scope.row.status=='14'">
              <span class="btn-line"></span>
              <el-button type="text" @click="$parent.$router.push({ path: `/wy-lessor/contract/edit?id=${scope.row.lessorContractId}` })">编辑</el-button>
            </div>
            <div v-if="scope.row.status=='00' || scope.row.status=='01'" style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </div>
            <div v-if="scope.row.status=='03' || scope.row.status=='13'" style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="change(scope.row)">变更</el-button>
            </div>
            <div v-if="scope.row.status=='03'||scope.row.status=='13'||scope.row.status=='04'" style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="renew(scope.row)">续签</el-button>
            </div>
            <div v-if="scope.row.status=='03' || scope.row.status=='13' " style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="$refs.contractBack.show(scope.row.lessorContractId)">退租</el-button>
            </div>
            <div v-if="scope.row.status=='01' " style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="send(scope.row)">提交</el-button>
            </div>
            <div v-if="scope.row.status=='13' " style="float:left">
              <span class="btn-line"></span>
              <el-button type="text" @click="excute(scope.row)">执行</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <type-select ref="typeSelect1"></type-select>
    <contract-back ref="contractBack"></contract-back>
    <contract-view ref="contractView"></contract-view>
  </div>
</template>
<script src="./index.js">
</script>
<style lang="scss" scoped>
.imgIcon {
  display: block;
  width: 28px;
  height: 26px;
  margin-left: 10px;
}
</style>

